<template>
  <div>
    <h1>演示翻译</h1>
    <el-button @click="locale = 'zh'">中文</el-button>
    <el-button @click="locale = 'en'">En</el-button>
    <div>此处有内容</div>
    <!-- 使用函数进行翻译, 希望传入一个标记, 就可以根据当前的语言设定, 返回最终翻译结果 -->
    <div>{{ t('sayHi') }}</div>
    <div>{{ t('zaoan') }}</div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      // 1. 记录当前的语言设定
      locale: 'zh',
      // 2. 准备翻译的信息
      messages: {
        zh: {
          sayHi: '你好',
          zaoan: '早安管理员, 欢迎回来'
        },
        en: {
          sayHi: 'Hello',
          zaoan: 'Good Morning, Guanliyuan, welcome back'
        }
      }
    }
  },
  methods: {
    t(val) {
      // 1. 取出字典
      // const zidian = this.messages['zh']
      const zidian = this.messages[this.locale]
      // 2. 返回翻译
      return zidian[val]
    }
  }
}
</script>
<style scoped>

</style>
